<template>
  <div class="app-container">
    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="提交审核"/>
    </el-steps>
    <el-form label-width="120px">
        <el-form-item label="课程标题">
            <el-input v-model="courseInfo.title" placeholder=" 示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"/>
        </el-form-item>
        <!-- 所属分类 TODO -->
        <!-- 一级分类 -->
        <el-form-item label="课程类别">
        <el-select
            v-model="courseInfo.subjectParentId"
            placeholder="一级分类"
            @change="subjectLevelOneChanged"
            >
            <el-option
            v-for="subject in subjectOneList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
        </el-select>
        <el-select v-model="courseInfo.subjectId" placeholder="二级分类">
        <el-option
            v-for="subject in subjectTwoList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"/>
        </el-select>
        </el-form-item>
        <!-- 课程讲师 -->
        <el-form-item label="课程讲师">
        <el-select
            v-model="courseInfo.teacherId"
            placeholder="请选择">
            <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"/>
        </el-select>
        </el-form-item>
        <!-- 课程总课时 -->
        <el-form-item label="总课时">
            <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right" placeholder="请填写课程的总课时数"/>
        </el-form-item>
        <!-- 课程简介 -->
        <el-form-item label="课程简介">
            <el-button type="primary" @click="dialogFormVisible = true">填写课程简介信息</el-button>
            <el-dialog title="简介信息" :visible.sync="dialogFormVisible" width="60%">
            <Tinymce :heigh="300" v-model="courseInfo.description" placeholder=" 课程信息介绍"/>
            <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
            </el-dialog>
        </el-form-item>
        <!-- 课程封面-->
        <el-form-item label="课程封面">
        <el-upload
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :action="BASE_API+'/eduoss/fileoss/uplad'"
            class="avatar-uploader">
            <img :src="courseInfo.cover" width="60%">
        </el-upload>
        </el-form-item>
        <!-- 课程价格 -->
        <el-form-item label="课程价格">
            <el-input-number :min="0" v-model="courseInfo.price" controls-position="right" placeholder="免费课程请设置为0元"/> 元
        </el-form-item>
        <el-form-item>
            <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">{{ saveButton }}</el-button>
        </el-form-item>
    </el-form>
  </div>
</template>
<script>
import course from '@/api/course/course'
import Tinymce from '@/components/Tinymce'

export default {
    components: { Tinymce },
    data(){
        return {
            courseInfo:{
                subjectParentId:'', // 一级ID
                title: '',
                subjectId: '', // 二级ID
                teacherId: '',
                lessonNum: 0,
                description: '',
                cover: '/static/2.jpg',
                price: 0
            },
            saveBtnDisabled : false,
            teacherList:{},
            subjectOneList:{},
            subjectTwoList:{},
            BASE_API:process.env.BASE_API,
            upload_message: '上传课程封面',
            dialogFormVisible:false,
            courseId:[]
        }
    },
    created(){
        this.init()
    },
    watch:{ // 监听器
       $route(to,from){ // 陆游监听
        this.init()
       }
    },
    methods:{
        init(){
            if(this.$route.params && this.$route.params.id){
                this.courseId = this.$route.params.id
                this.getCourseById()
                this.getTeacherList()
                this.saveButton = "修改"
            }else{
                this.getTeacherList()
                this.getSubjectList()
                this.saveButton = "保存并下一步"
                this.courseInfo = {
                    subjectParentId:'', // 一级ID
                    title: '',
                    subjectId: '', // 二级ID
                    teacherId: '',
                    lessonNum: 0,
                    description: '',
                    cover: '/static/2.jpg',
                price: 0
                }
                }
        },
        saveOrUpdate(){
            if(this.$route.params && this.$route.params.id){
                console.log(this.courseInfo)
                this.courseId = this.$route.params.id
                course.updateCourseInfo(this.courseInfo)
                .then(res=>{
                this.$message({
                    type:'success',
                    message:'修改课程信息成功'
                    })
                this.$router.push({path:'/course/chapter/'+this.courseId})
            })
            }else{
                course.addCourseInfo(this.courseInfo)
                .then(res=>{
                this.$message({
                    type:'success',
                    message:'添加课程信息成功'
                })
                this.$router.push({path:'/course/chapter/'+res.data.id})
            })
            }
        },
        getTeacherList(){
            course.getTeacherAll()
            .then(res =>{
                this.teacherList = res.data.items
            })
        },
        getSubjectList(){
            course.getSubjectList()
            .then(res=>{
                this.subjectOneList = res.data.list
            })
        },
        subjectLevelOneChanged(value){
            for(let i=0;i<this.subjectOneList.length;i++){
                if(this.subjectOneList[i].id == value){
                    this.subjectTwoList = this.subjectOneList[i].children,
                    this.courseInfo.subjectId = ''
                }
            }
        },
        beforeAvatarUpload(file){
            const isJPG  = file.type == 'image/jpeg'
            const isLt2M = file.size/1024/1024 <2 
            if(!isJPG){
                this.$message.error('上传格式只能说jpg')
            }
            if(!isLt2M){
                this.$message.error('文件大小低于2M')
            }
            return isJPG &&isLt2M
        },
        handleAvatarSuccess(res){
            this.courseInfo.cover = res.data.url
            this.loading=false
        },
        getCourseById(){
            course.getCourseById(this.courseId)
            .then(res =>{
                this.courseInfo = res.data.Course
                course.getSubjectList()
                .then(res=>{
                     this.subjectOneList = res.data.list
                     for(let j=0;j<this.subjectOneList.length;j++){
                        if(this.courseInfo.subjectParentId == this.subjectOneList[j].id){
                            this.subjectTwoList = this.subjectOneList[j].children
                        }
                     }
                })
            })
        }
    }
}
</script>
<style scoped>
.tinymce-container {
  line-height: 29px;
}
</style>